<template>
  <!-- 首页 -->
  <view>
    <left-side :show="show" @close="show = false" />
    <layout :title="title" background="#fff">
      <view slot="left">
        <image
          class="home-image"
          :src="getImgSrc('/home/icon_home_my@2x.png')"
          @tap="showCenter"
        />
      </view>
      <view slot="right">
        <image
          class="home-news"
          :src="getImgSrc('/home/icon_news_black@2x.png')"
          @tap="message"
        />
      </view>
      <view>
        <view class="home_cell">
          <view class="home_tab">
            <view class="home_tab_bg">
              <view class="home_tab_bg1"></view>
              <view class="home_tab_bg2"></view>
            </view>
            <view class="home_tab_list">
              <view
                class="home_tab_item home_tab_item_left"
                :class="tabActive === 2 ? 'active' : ''"
                @tap="tabChange(2)"
              >
                发布任务
                <view class="tips tips_c1"> 取件 </view>
              </view>
              <view
                class="home_tab_item home_tab_item_right"
                :class="tabActive === 1 ? 'active' : ''"
                @tap="tabChange(1)"
              >
                任务发布
                <view class="tips tips_c2"> 其他 </view>
              </view>
            </view>
          </view>
          <view class="home_content">
            <!-- <view class="place myWay" v-if="tabActive === 1">
						<view class="list-call" @tap="gotoAddress('send')">
							<view class="place_point"></view>
							 <input class="u-input" type="text" v-model="username" maxlength="48" placeholder="请输入发件地址"/> 
							<view class="place_text" >
								<view class="place_text2">
									请输入发件地址
								</view>
							</view>
							<image :src="getImgSrc('/home/icon_right.png')" style="height: 30rpx;width: 30rpx;" mode="heightFix"></image>
						</view>
					</view> 
					<view class="place_line" v-if="tabActive === 1"></view> -->
            <template v-if="tabActive === 2">
              <view class="place siteWay" @click="showSiteList">
                <view class="list-call">
                  <view class="place_point place_point_huang"></view>
                  <view class="place_text" v-if="siteAddress.schoolName">
                    <view class="place_text1">
                      {{ siteAddress.schoolName }}
                    </view>
                    <view class="place_text2">
                      {{ siteAddress.name }}
                    </view>
                  </view>
                  <view class="place_text" v-else>
                    <view class="place_text2"> 请选择任务起始点 </view>
                  </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="
                      height: 30rpx;
                      width: 30rpx;
                      transform: rotate(90deg);
                    "
                    mode="heightFix"
                  ></image>
                </view>
              </view>
              <view class="place_line"></view>
              <view class="place myWay">
                <view
                  class="list-call"
                  @tap="gotoAddress(tabActive === 2 ? 'get' : 'send')"
                >
                  <view class="place_point"></view>
                  <!-- <input class="u-input" type="text" v-model="username" maxlength="48" placeholder="请输入发件地址"/> -->
                  <view class="place_text">
                    <view class="place_text2">
                      {{
                        tabActive === 2 ? "请选择任务结束点" : "请选择任务起始点"
                      }}
                    </view>
                  </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx; width: 30rpx"
                    mode="heightFix"
                  ></image>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="place myWay">
                <view
                  class="list-call"
                  @tap="gotoAddress(tabActive === 2 ? 'get' : 'send')"
                >
                  <view class="place_point"></view>
                  <!-- <input class="u-input" type="text" v-model="username" maxlength="48" placeholder="请输入发件地址"/> -->
                  <view class="place_text">
                    <view class="place_text2">
                      {{
                        tabActive === 2 ? "请选择任务结束点" : "请选择任务起始点"
                      }}
                    </view>
                  </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="height: 30rpx; width: 30rpx"
                    mode="heightFix"
                  ></image>
                </view>
              </view>
              <view class="place_line"></view>
              <view class="place siteWay" @click="showSiteList">
                <view class="list-call">
                  <view class="place_point place_point_huang"></view>
                  <view class="place_text" v-if="siteAddress.schoolName">
                    <view class="place_text1">
                      {{ siteAddress.schoolName }}
                    </view>
                    <view class="place_text2">
                      {{ siteAddress.name }}
                    </view>
                  </view>
                  <view class="place_text" v-else>
                    <view class="place_text2"> 请选择任务结束点 </view>
                  </view>
                  <image
                    :src="getImgSrc('/home/icon_right.png')"
                    style="
                      height: 30rpx;
                      width: 30rpx;
                      transform: rotate(90deg);
                    "
                    mode="heightFix"
                  ></image>
                </view>
              </view>
            </template>
          </view>
        </view>
        <view class="home_tip">
          <image
            :src="getImgSrc('/home/icon_map@2x.png')"
            style="
              flex: 0 0 30rpx;
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            "
            mode="heightFix"
          ></image>
          <text>成为赏金猎人，领取赏金任务</text>
        </view>
        <view class="home_page_list">
          <view class="home_page_item" @tap="gotoOrderList()">
            <image
              class="home_page_item_img"
              :src="getImgSrc('/home/icon_home_order1@2x.png')"
              mode="heightFix"
            ></image>
            <view class="home_page_item_text"> 我的订单 </view>
          </view>
          <view class="home_page_item" @tap="gotoBeRunningman()">
            <image
              class="home_page_item_img"
              :src="getImgSrc('/home/icon_home_give1@2x.png')"
              mode="heightFix"
            ></image>
            <view class="home_page_item_text">
              {{ hasBenRunner ? "切换到赏金猎人" : "成为赏金猎人" }}
            </view>
          </view>
          <view class="home_page_item" @tap="share()">
            <image
              class="home_page_item_img"
              :src="getImgSrc('/home/wx1.png')"
              mode="heightFix"
            ></image>
            <view class="home_page_item_text"> 微信分享 </view>
          </view>
          <!-- <view class="home_page_item" @tap="moreMes()">
          <image
            class="home_page_item_img"
            :src="getImgSrc('/home/icon_home_more@2x.png')"
            mode="heightFix"
          ></image>
          <view class="home_page_item_text"> 更多精彩 </view>
        </view> -->
        </view>
        <view class="home_bg">
          <!-- <image
            src="https://harry-run-prod.oss-cn-zhangjiakou.aliyuncs.com/img/good/photo/2022-04-02/3c4f620b-7a49-424c-927b-af4c88.png"
            style="width: 100%"
            mode="widthFix"
          ></image> -->
					<image src="https://dianwona.oss-cn-hangzhou.aliyuncs.com/img/user/card/2022-11-03/ed3198c2-973b-4bef-9e91-f9783b.png" style="width: 100%;" mode="widthFix"></image>
        </view>
        <!-- <u-divider>已经到底了</u-divider> -->
        <view
          class="screen-bottomFill"
          style="opacity: 1"
          :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
        >
          <!-- 用来填充导航 和 底部的多余 -->
        </view>
      </view>

      <u-popup
        v-model="siteListShow"
        mode="bottom"
        @close="siteListShow = false"
      >
        <view
          style="width: 100vw; background: #ffffff; padding-top: 10rpx"
          :style="'padding-bottom:' + vuex_phoneLayout.ipxbottom + 'px;'"
        >
          <view class="site_tab">
            <view
              class="site_tab_item"
              :class="siteActive == 1 ? 'active' : ''"
              @tap="siteTabChange(1)"
            >
              区域
            </view>
            <view
              class="site_tab_item"
              :class="siteActive == 2 ? 'active' : ''"
              @tap="siteTabChange(2)"
            >
              站点
            </view>
          </view>
          <view v-if="siteActive == 1">
            <view class="search" style="background: #ffffff">
              <u-search
                v-model="keywords1"
                @custom="search1"
                @search="search1"
              ></u-search>
            </view>
            <scroll-view scroll-y style="height: 40vh">
              <view v-if="schoolList.length">
                <view
                  class="site_item"
                  v-for="(item, index) in schoolList"
                  :key="index"
                  @tap="selectSchool(item)"
                >
                  <view class="place_text1">
                    <text>{{ item.value }}</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view v-else>
            <view class="search" style="background: #ffffff">
              <u-search
                v-model="keywords2"
                @custom="search2"
                @search="search2"
              ></u-search>
            </view>
            <scroll-view scroll-y style="height: 40vh">
              <view v-if="siteList.length">
                <view
                  class="site_item"
                  v-for="(item, index) in siteList"
                  :key="index"
                  @tap="selectSite(item)"
                >
                  <view class="place_text1">
                    <text>{{ item.value.name }}</text>
                  </view>
                  <view class="place_text2">
                    <text>{{ item.value.schoolName }}</text>
                  </view>
                </view>
              </view>
              <view v-else>
                <view class="site_item">
                  <view class="place_text2">
                    <text>暂无站点信息</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </u-popup>
    </layout>
  </view>
</template>
<script>
import HomeNav from "@/components/homeNav/index";
import { getAccess, getLocation } from "@/common/location.js";
import { QQ_MAP_KEY } from "@/common/constant.js";
import leftSide from "./leftSide";
import { checkLogin } from "@/common/util.js";
export default {
  components: {
    HomeNav,
    leftSide,
  },
  data() {
    return {
      title: "定位中",
      tabActive: 2,
      show: false,
      siteListShow: false,
      head: "/static/aidex/images/head.png",
      imgList: [
        // {image: '/static/aidex/banner/banner02.png'},
        // {image: '/static/aidex/banner/banner03.png'}
      ],
      qqmapsdk: QQ_MAP_KEY,
      todoCount: 3,
      latitude: "",
      longitude: "",
      runCount: 0,
      min: 0,
      siteActive: 1,
      schoolList: [],
      schoolListData: [],
      schoolAdress: {},
      keywords1: "",
      siteList: [],
      siteListData: "",
      siteAddress: {},
      keywords2: "",
      hasBenRunner: false,
    };
  },
  onLoad() {
    uni.hideTabBar({});
    this.$u.vuex("vuex_flag", "user");
  },
  onShow() {
    this.queryHasBenRunner();
    this.getData();
  },
  methods: {
    message() {
      uni.navigateTo({
        url: "/pages/sys/user/message",
      });
    },
    async queryHasBenRunner() {
      const data = await this.$u.api.queryRealNameProcess();
      this.hasBenRunner = data && data.data && data.data.type === 5;
    },
    async gotoBeRunningman() {
      if (this.hasBenRunner) {
        uni.reLaunch({
          url: "/pages/sys/home/hall",
        });
        return;
      }
      if (checkLogin(true)) {
        uni.navigateTo({
          url: "/pages/sys/auth/identity",
        });
      }
    },
    search1(e) {
      let data = [];
      let list = [];
      if (this.schoolListData && this.schoolListData != "") {
        data = JSON.parse(this.schoolListData);
        if (e) {
          data.map((item) => {
            if (item.value.indexOf(e) != -1) {
              list.push(item);
            }
          });
        } else {
          list = data;
        }
        this.schoolList = list;
      }
    },
    share() {
      this.$bridge.callHandler(
        "triggerToShareWx",
        JSON.stringify({
          title: "有新的任务等待领取",
          content:
            "赏金猎人请于APP中接单",
          hrefUrl: `${window.location.origin}${window.location.pathname}#/pages/sys/share/index`,
          // img: "https://harry-run-prod.oss-cn-zhangjiakou.aliyuncs.com/img/good/photo/2022-02-27/aeffd705-b5ef-4a99-a423-8dc20f.png",
          img: "https://harry-run-prod.oss-cn-zhangjiakou.aliyuncs.com/img/good/photo/2022-04-02/2395b0cf-ee8d-419b-b85f-fdb563.png"
        }),
        (args) => {}
      );
    },
    search2(e) {
      let data = [];
      let list = [];
      if (this.siteListData && this.siteListData != "") {
        data = JSON.parse(this.siteListData);
        if (e) {
          data.map((item) => {
            if (
              item.value.name.indexOf(e) != -1 ||
              item.value.schoolName.indexOf(e) != -1
            ) {
              list.push(item);
            }
          });
        } else {
          list = data;
        }
        this.siteList = list;
      }
    },
    logOutHandle() {
      this.logOut();
    },
    gotoOrderList(e) {
      if (checkLogin(true)) {
        let text = "/pages/sys/cuser/orderList";
        if (e) {
          text += "?index=" + e;
        }
        uni.navigateTo({
          url: text,
        });
      }
    },
    showCenter() {
      // 打开左侧用户信息
      this.$u.api.getUserMes().then((res) => {
        if (res.code == 200) {
          this.$u.vuex("vuex_user", res.data);
        }
      });
      this.show = true;
    },
    selectSchool(e) {
      this.schoolAdress = e;
      this.siteActive = 2;
      this.$u.api.getHomeSchoolSite(this.schoolAdress.key).then((res) => {
        if (res.code == "200") {
          this.siteList = res.data;
          this.siteListData = JSON.stringify(res.data);
        } else {
          this.$u.toast(res.msg);
        }
      });
    },
    selectSite(e) {
      this.siteAddress = e.value;
      this.siteListShow = false;
    },
    getAuthorizeH5() {},
    showSiteList() {
      // 打开校区站点选择
      if (checkLogin(true)) {
        this.siteListShow = true;
        this.siteActive = 1;
      }
    },
    siteTabChange(e) {
      this.siteActive = e;
    },

    getData() {
      if (this.latitude && this.longitude) {
        this.$u.api
          .getHomeInit({
            lat: this.latitude,
            lon: this.longitude,
          })
          .then((res) => {
            if (res.code == "200") {
              // this.schoolList = res.data.school
              // this.schoolListData = JSON.stringify(res.data.school)
              // this.siteList = res.data.site
              // this.siteListData = JSON.stringify(res.data.site)
              this.runCount = res.data.runCount;
              this.min = res.data.min;
              (this.siteAddress =
                this.vuex_site && this.vuex_site.id ? this.vuex_site : {}),
                this.$u.vuex("vuex_logistics", [
                  { key: "", value: "不限" },
                  ...(res.data.logistics || []),
                ]);
            } else if (res.msg) {
              this.$u.toast(res.msg);
            }
          });
        this.$u.api.getHomeSchool().then((res) => {
          if (res.code == "200") {
            this.schoolList = res.data;
            this.schoolListData = JSON.stringify(res.data);
          }
        });
      } else {
        getLocation().then(this.hasLocation);
      }
    },
    hasLocation(res) {
      this.latitude = res.latitude;
      this.longitude = res.longitude;
      this.getCity(res);
      this.getData(res);
    },
    getCity(res) {
      let that = this;
      this.$u.api
        .map("https://restapi.amap.com/v3/geocode/regeo?output=json", {
          location: `${res.longitude},${res.latitude}`,
        })
        .then((res) => {
          if (typeof res.regeocode.addressComponent.city === "string") {
            that.title = res.regeocode.addressComponent.city;
          } else {
            that.title = "定位失败";
          }
        });
    },
    getLocation(successCb, authDenyCb) {
      getLocation().then(
        (res) => {
          successCb(res);
          that.isLocated = true;
        },
        (err) => {
          authDenyCb(err);
          that.isLocated = false;
        }
      );
    },
    tabChange(e) {
      this.tabActive = e;
    },
    gotoAddress(e) {
      if (this.siteAddress.id) {
        uni.navigateTo({
          url: "/pages/sys/cuser/address",
        });
        this.$u.vuex("vuex_site", this.siteAddress);
        this.$u.vuex("vuex_sendOrGet", e);
      } else {
        this.$u.toast("请先选择任务结束点");
      }
    },
    navTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // moreMes() {
    //   this.$u.toast("更多内容请下载APP体验~");
    // },
  },
};
</script>
<style lang="scss">
@import "index.scss";
.home_bg {
  position: absolute;
  top: 0;
  width: 100%;
}
.home-news {
  height: 48rpx;
  width: 48rpx;
  padding-right: 32rpx;
  display: flex;
  align-items: center;
}
.home-image {
  width: 48rpx;
  height: 48rpx;
}

.home_cell.home_cell {
  position: relative;
  z-index: 1;
  padding: 0 30rpx;
  margin-top: 330rpx;
}
.home_tab_bg {
  padding: 0 40rpx;
  overflow: hidden;
  height: 95rpx;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.home_tab_bg1 {
  background: #e7ecf1;
  height: 50rpx;
}
.home_tab_bg2 {
  background: #ffffff;
  height: 50rpx;
}
.home_tab {
  padding-top: 14rpx;
  height: 110rpx;
  position: relative;
}
.home_tab_list {
  position: absolute;
  bottom: 0;
  height: 95rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.home_tab_item {
  background-color: #e7ecf1;
  width: 50%;
  height: 95rpx;
  color: #333333;
  line-height: 95rpx;
  text-align: center;
  font-size: 30rpx;
  position: relative;
}
.tips {
  position: absolute;
  right: 58rpx;
  bottom: 54rpx;
  font-size: 20rpx;
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
  padding: 4rpx 10rpx 6rpx;
  background: rgb(24, 185, 150);
  border-radius: 22rpx 20rpx 20rpx 6rpx;
}
.tips_c2 {
  background: rgb(84, 129, 226);
}
.home_tab_item_left {
  border-top-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
}
.home_tab_item_right {
  border-top-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
}
.home_tab_item.active {
  background-color: #ffffff;
  height: 110rpx;
  padding-top: 15rpx;
  color: #4e95fc;
  font-size: 34rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  .tips {
    bottom: 60rpx;
  }
}
.home_content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  padding: 10rpx 0 20rpx;
}
.place {
  padding: 0 28rpx 0 42rpx;
}
.place_line {
  background: #eeeeee;
}
.place_point {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #4e95fc;
}
.place_point_huang {
  background-color: #ffca3b;
}
.place_text {
  flex: 1;
  margin-left: 28rpx;
}
.place_text1 {
  color: #282828;
  font-size: 34rpx;
  font-weight: 800;
  margin-bottom: 16rpx;
}
.place_text2 {
  color: #899aaf;
  font-size: 28rpx;
  min-width: 200rpx;
}
.home_tip {
  margin: 36rpx 30rpx;
  padding: 22rpx 20rpx 22rpx 45rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 28rpx;
  color: #899aaf;
}
.home_page_list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 30rpx 24rpx 10rpx;
}
.home_page_item {
  text-align: center;
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.home_page_item_img {
  width: 120rpx;
  height: 120rpx;
}
.home_page_item_text {
  color: #899aaf;
  font-size: 30rpx;
  margin-top: 24rpx;
  white-space: nowrap;
}
</style>
<style lang="scss">
.sideBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.sideContent {
  position: relative;
  width: 100%;
  z-index: 1;
  padding-top: 100rpx;
}
.sideContent_avatar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40rpx;
}
.avatar_img {
  width: 140rpx;
  height: 140rpx;
  border: 4rpx solid #ffffff;
  border-radius: 50%;
}
.avatar_mes {
  flex: 1;
  margin-left: 18rpx;
}
.avatar_mes_text1_txt1 {
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}
.avatar_mes_text1_txt2 {
  font-size: 26rpx;
  color: #4b4b4b;
  margin-left: 18rpx;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}
.avatar_mes_text2 {
  font-size: 28rpx;
  color: #4b4b4b;
  margin-top: 30rpx;
}
.sideContent_coupon {
  padding: 48rpx 40rpx 20rpx 30rpx;
  position: relative;
}
.sideContent_couponBg {
  width: 100%;
}
.sideContent_coupon_mes {
  position: absolute;
  top: 48rpx;
  left: 30rpx;
  color: #ffffff;
  padding: 24rpx 0 0 60rpx;
}
.sideContent_coupon_mes_text1 {
  font-size: 34rpx;
  line-height: 1;
}
.sideContent_coupon_mes_text2 {
  font-size: 26rpx;
  margin-top: 14rpx;
  line-height: 1;
}
.sideContent_order_title {
  padding: 0 34rpx 0 53rpx;
  font-size: 30rpx;
  color: #282828;
  font-weight: 800;
}
.sideContent_order_title_txt1 {
  line-height: 44rpx;
}
.sideContent_order_title_txt2 {
  line-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sideContent_order_list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 24rpx;
}
.sideContent_order_item {
  text-align: center;
  font-size: 24rpx;
  color: #333333;
}
.sideContent_tab_list {
  padding: 0 40rpx;
  .sideContent_tab_item {
    height: 90rpx;
  }
}
.site_item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
}

.site_tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30rpx 30rpx 0rpx;
  .site_tab_item {
    margin-right: 20rpx;
    padding: 10rpx;
    font-size: 32rpx;
  }
  .site_tab_item.active {
    color: #007aff;
  }
}
</style>
